<!-- 两个问题：一个头部、底部在购物车隐藏后不显示   团购内页链接问题 -->
<template>
  <div class="main">
    <div class="banner">
        <swiper :list="list" :aspect-ratio="500/1000" loop auto v-model="index" @on-index-change="change"></swiper>
    </div>
    <v-navbar></v-navbar>
    <group class="notice">
        <cell title="商城公告">
            <marquee>
                <marquee-item v-for="(item, index) in notice_list" :key="index">
                    <a :href="item.link">{{ item.content }}</a>
                </marquee-item>
            </marquee>
        </cell>
    </group>
    <div class="second">
        <div class="head">
            <p>每日秒杀</p>
            <div class="date">
                <a href="/list_seckill" class="start">{{ start }}</a>
                <a href="/list_seckill" class="end">{{ end }}</a>
            </div>
        </div>
        <div class="content">
            <ul>
                <li v-for="item in second">
                    <a :href="item.link" :title="item.title"><img :src="item.src" /></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="product">
        <div v-for="item in proList" :class="item.class">
            <p class="title">{{ item.title }}</p>
            <ul>
                <li v-for="item in item.list">
                    <a :href="item.link" class="img"><img :src="item.src" /></a>
                    <a :href="item.link" class="name">{{ item.title }}</a>
                    <a :href="item.classify_link" class="classify">{{ item.classify }}</a>
                    <p>价格：<span>{{ item.price }}</span></p>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>
  
<script>
  import { Swiper, Group, Cell, Marquee, MarqueeItem } from 'vux'
  import vNavbar from './components/navbar'
  export default {
	data (){
		return {
            list: [{
              url: 'javascript:',
              img: require('../assets/b07_meitu_1.jpg'),
            }, {
              url: 'javascript:',
              img: require('../assets/b07_meitu_1.jpg'),
            }],
            index: 0,
            notice_list: [
              {
                link: '#/msg_article?id=1',
                content: '促销vivoX9新品发布乐享3重好礼'
              },
              {
                link: '#/msg_article?id=2',
                content: '促销vivoX9新品发布乐享3重好礼'
              },
            ],
            start: '10:00',
            end: '14:00',
            second: [
                {
                    title: '秒杀一',
                    link: '#/list_groupprice?list=seckill',
                    src: require('../assets/seckillPro1.jpg')
                },
                {
                    title: '秒杀二',
                    link: '#/list_groupprice?list=seckill',
                    src: require('../assets/seckillPro2.jpg')
                },
                {
                    title: '秒杀三',
                    link: '#/list_groupprice?list=seckill',
                    src: require('../assets/seckillPro3.jpg')
                }
            ],
            proList: [
                {
                    class: 'newPro',
                    title: '新品上市',
                    list: [
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=news&id=1',
                            classify_link: '#/list_product?list=mews',
                            src: require('../assets/essencePro1.jpg')
                        },
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=news&id=2',
                            classify_link: '#/list_product?list=mews',
                            src: require('../assets/essencePro2.jpg')
                        }
                    ]
                },
                {
                    class: 'promotion',
                    title: '促销爆款',
                    list: [
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=promotion&id=1',
                            classify_link: '#/list_product?list=promotion',
                            src: require('../assets/essencePro3.jpg')
                        },
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=promotion&id=2',
                            classify_link: '#/list_product?list=promotion',
                            src: require('../assets/essencePro4.jpg')
                        }
                    ]
                },
                {
                    class: 'quality',
                    title: '精品推荐',
                    list: [
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=quality&id=1',
                            classify_link: '#/list_product?list=quality',
                            src: require('../assets/essencePro5.jpg')
                        },
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=quality&id=2',
                            classify_link: '#/list_product?list=quality',
                            src: require('../assets/essencePro5.jpg')
                        },
                    ]
                },
                {
                    class: 'special',
                    title: '特价专区',
                    list: [
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=special&id=1',
                            classify_link: '#/list_product?list=special',
                            src: require('../assets/essencePro2.jpg')
                        },
                        {
                            title: '汽车除雪用品多功能可伸缩除雪铲刮雪器清雪板车用除霜除冰',
                            classify: '精品内衣 ...',
                            price: '￥180.00',
                            link: '#/msg_product?msg=special&id=2',
                            classify_link: '#/list_product?list=special',
                            src: require('../assets/essencePro3.jpg')
                        },
                    ]
                }
            ]
        }
	},
    methods: {
        change (index){
           this.index = index
        }
	},
	components : {	
        Swiper, vNavbar, Marquee, MarqueeItem, Group, Cell
	}
  }
</script>
<style>
    .vux-cell-primary{
        -webkit-flex:none !important; flex:none !important;
     }
    .vux-cell-primary label{
        color:rgb(200, 17, 24); font-size:.16rem; 
    }
    .weui-cell__ft{
        float:right;
    }
    .vux-cell-primary{
        -webkit-box-flex:1;
        -webkit-flex:1 !important;
        flex:1 !important;
    }
    .vux-marquee-box li a{
        color:#5a5a5a;
    }
    .vux-marquee-box li a:hover{
        color:#c81118;
    }
    .second{
        overflow:hidden; border-top:.05rem solid #eee;border-bottom:.05rem solid #eee;
    }
    .second .head{
        margin:.15rem .2rem .2rem .12rem; overflow:hidden;
    }
    .second .head p{
        float:left; font-size:.16rem; color:#000;
    }
    .second .head .date{
        float:right;
    }
    .second .head .date a{
        width:.6rem; height:.2rem; line-height:.2rem; border-radius:.2rem; background:rgba(200,17,24,1); border:.01rem solid rgb(255,87,0); text-align:center; display:inline-block;  color:#fff; margin-left:.2rem; font-size:.12rem;
    }
    .second .head .date .start{
        border-color:rgba(200,17,24,1); background:#fff; color:rgba(200,17,24,1);
    }
    .second .content{
        overflow:hidden; padding:0 0 .1rem; width:100%;
    }
    .second .content li{
        width:33.33%; float:left; text-align:center;
    }
    .second .content li img{
        width:.8rem;;
    }
    .product{
        overflow:hidden;
    }
    .product .title{
        height:.44rem; line-height:.44rem; font-size:.16rem; text-align:center; color:#000;
    }
    .product li{
        width:38.4%; margin:0 2% .1rem 0; float:left; padding:.15rem; background:#fff; border:.01rem solid #eee;
    }
    .product li:hover{
        border-color:#c81118;
    }
    .product li img{
        width:100%;
    }
    .product li:nth-of-type(2n){
        margin-right:0;
    }
    .product ul{
        background:#f7f7f7; overflow:hidden; padding:0 .08rem;
    }
    .product ul .img{
        display:block;
    }
    .product ul .classify{
        line-height:.22rem; color:#0064d4;
    }
    .product ul .classify:hover{
        color:#2c90fff;
    }
    .product ul p{
        color:#acacac;
    }
    .product ul p span{
        font-size:.14rem; color:#cc0000; font-weight:bold;
    }
</style>